<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="front/front_layout">
<head>
    <title>订单详情</title>
</head>
<body>

<section layout:fragment="content">
    <div class="page-wrapper">
        <!--<div class="order-list-body">-->
        <div class="table-wrapper">

            <div class="order-body">
            <div id="ongoing-orders-list" class="ongoing-orders" style="display: none;">
                <!--<div id="repeat-ongoing-item" class="group" style="display: none;">-->
                <div id="repeat-ongoing-item" class="table-order-list" style="display: none;">
                    <div class="table-name">
                        A12
                    </div>
                    <div class="message">
                    <!--<div class="prop" style="border-left: 1px solid #d0d0d0">-->
                        <div class="line number">订单编号：<span class="text">22</span>
                            <span class="total" style="float:right;padding-right: 1rem">总价</span>
                        </div>
                        <div class="line waiter-home-order-from">订单来源：<span class="text">微信(vision_小词)</span>
                            <span  style="float:right;padding-right: 1rem">(优惠：-0.0)</span>
                        </div>
                        <div class="line waiter-home-order-time">下单时间：<span class="text" >2016-09-18 10:14</span>
                            <div style="float:right;padding-right: 1rem">
                            <button id="order-right-btn" class="btn" >结账</button>
                            </div>
                        </div>
                    </div>
                    <!--<div class="summary">
                        <div class="left total">消费总计:<span class="money unpayed">￥328</span></div>
                        <button class="right btn btn-buy">买单</button>
                    </div>-->
                </div>
            </div>
            <hr style="border-bottom: 1px solid #e5e5e5">
            <!--<div class="order-body">-->
                <div id="waiter-food-list" class="food-list" style="top:6rem;bottom: 3rem;border-top: 1px solid #e5e5e5">
                </div>
                <div id="repeat-preview-food-item" class="food-item" style="display: none;">
                    <div class="menu-name"><span class="name"></span></div>
                    <span class="unitPrice"></span>
                    <span class="preview-count"></span>
                </div>
                <div id="repeat-order-food-item" class="food-item" style="display: none;">
                    <div class="menu-name"><span class="name"></span><span class="count"></span></div>
                    <span class="unitPrice"></span>
                    <span class="isDone"><i class="icon-remove"></i></span>
                </div>

                <div class="summary" style="display: none">
                    <div class="pivot">
                        <div class="pivot-left"></div>
                        <div class="pivot-center"></div>
                        <div class="pivot-right"></div>
                    </div>
                    <div class="summary-content">
                        <div class="summary-line">
                            <span class="summary-left">小计:</span>
                            <span id="total" class="summary-right"></span>
                        </div>
                        <div class="summary-line">
                            <span class="summary-left">优惠:</span>
                            <span id="coupon" class="summary-right">无</span>
                        </div>
                        <div class="total">总计：<span id="final-total" class="price"></span></div>
                        <button id="confirm" style="display: none;" class="btn book">下单</button>
                        <!--<div class="btn-group">
                            <button id="order-left-btn" class="btn">拒绝</button>
                            <button id="order-right-btn" class="btn">确定</button>
                        </div>-->
                    </div>

                </div>

            </div>

        </div>
    </div>

</section>

<section layout:fragment="extra_scripts">


    <script th:inline="javascript">

        (function () {
            "use strict";

            window.OrderState = {
                confirmed: 0, //已确认订单
                wechat_payed: 1, //已通过微信支付的订单
                unconfirmed: 2, // 为确认订单
                cart_message: 3, // 购物车信息
                scan_qr_payed: 4, // 扫描
                offline_payed: 5,
                refused: 6
            }


            window.initWaiter = function () {
                window.isWaiter = true;
                window.userId = $.cookie('userId') || 'codysnail';//'ohmygod';//'idiscody'; //测试使用
                window.storeId = $.cookie('storeId');
                window.username = $.cookie('username');

            }

            var isLogin = $.cookie('isLogin');
            if (!isLogin) {
                var $container = $('.page-container');
                $container.load('/snippet/login.html', '_t=23', function (text, status, $xhr) {

                });
            } else {
                initWaiter();
            }

            $('#waiter-name').find('.text').text($.cookie('username'));

            var pageable = {
                page:0
            };

            var noOngoingOrder = false;
            var noHistoryOrder = false;

            var $ongoingList = $('#ongoing-orders-list');


            var $repeatOngoingItem = $('#repeat-ongoing-item');

            loadData();


            function reset() {
                $ongoingList.hide();
                $repeatOngoingItem.siblings('.group').remove();
            }

            function refresh() {
                console.log('refresh');
                reset();
                loadData();
            }

            function loadData(){
                console.log("table id is "+[[${table_id}]]);
                window.tableId = [[${table_id}]];
                if(window.tableId){
                    $.get('/wechatOrder/api/getCurrentTableOrder/'+window.tableId,'',function(data){
                        console.log(data);
                        if(data){
                            showUnpayedItem(data)
                        }else{
                            window.confirm("no orders");
                        }
                    });

                    orderByTableId(tableId);
                }else{
                    window.confirm("no orders");
                }
            }

            function orderByTableId(tableId) {
                console.log(tableId);
//                $('#order-preview-title').text('结账');

//                $.get('/api/getorder/table/' + tableId, function (data) {
                $.get('/waiterOrder/api/getCurrentTableOrder/' + tableId, function (data) {
                    showOnlineOrder(data.order,data.menu);
                });
            }

            /*
             * 显示在线订单信息
             */
            function showOnlineOrder(order,menus) {
               /* clearItem();
                resetButtons();*/
                console.log(order);
                /*if(order.state == OrderState.unconfirmed){ //服务员未确认订单
                    $('.btn-group').show();
                    var id = order.orderId;
                    $('#order-left-btn').text('拒绝').on('click',function(){
                        refuse(id);
                    });
                    $('#order-right-btn').text('确定').on('click',function(){
                        accept(id);
                    });
                }else if (order.state == OrderState.wechat_payed) { //已结账订单 --- 微信端
                    $('#confirm').text('已结单').addClass('payed').show();
                } else if(order.state == OrderState.confirmed){ //已确认订单，点击按钮-> 收款页面

                    $('#confirm').text('收款').show().on('click',function(){
                        window.confirm("收款");
                        /!*
                        //显示收款二维码
                        location.href = "#action=waiter_qr&tableId="+order.tableId;
*!/
                    });
                }*/
                console.log("menus: "+menus);
                if(!menus || !menus.length) return;

                var $list = $('#waiter-food-list');
                $list.html('');
                $.each(menus, function (index, item) {
                    var $item = cloneOrderItem();
                    var unitPrice = item.foodDetail.unitPrice;
                    var count = item.count;
                    var price = unitPrice * count;
                    var name = item.foodDetail.name;
                    $item.attr('map-id',item.id);
                    $item.find('.menu-name .name').text(name);
                    $item.find('.unitPrice').text('￥' + unitPrice);
                    $item.find('.count').text('x' + count);
                    $item.find('.price').text(price);
                    if(item.removeFlag == 0){
                        $item.find('.icon-remove').on('click',removeOrderItem);
                    }else{
                        $item.addClass('removed');
                        $item.find('.isDone').text('已退');
                    }

                    $list.append($item);
                });

//                showOrderSummary(order);
            }

            var $repeatOrderItem = undefined;
            function cloneOrderItem() {
                if (!$repeatOrderItem) {
                    $repeatOrderItem = $('#repeat-order-food-item');
                }
                var $item = $repeatOrderItem.clone();
                $item.attr('id', '');
                $item.show();
                return $item;
            }


            function removeOrderItem(){
                var $item = $(this).parents('.food-item');
                if(confirm('确定要退订['+$item.find('.menu-name .name').text()+']?')){
                    //退订
                    var mapId = $item.attr('map-id');
                    $.getJSON('/waiterOrder/api/delteMenuItem/'+mapId,'',function(data){
                        console.log(data);

                        if(data.status == 'success'){
                            $item.addClass('removed');
                            $item.find('.isDone').text('已退');

                            showOrderSummary(data.order);

                        }else{

                        }

                    }).fail(function(){

                    });
                }
            }

            function showOrderSummary(data) {
                var originalPrice = data.originalPrice;
                var price = data.price;
                $('#total').text('￥' + originalPrice);
                $('#coupon').text(originalPrice == price ? '无' : '￥' + (originalPrice - price).toFixed(1));
                $('#final-total').text('￥' + price);

                $('.summary').show();
            }


            function showUnpayedItem(item) {
                if($ongoingList.is(':hidden')){
                    $ongoingList.show();
                }
                var $item = cloneOngoingItem();
                $item.find('.table-name').text(item.tableName);
                $item.find('.people').text(item.people);
                var time  = item.createDate;
                $item.find('.time').text(time);
                $item.attr('order-id',item.orderId);
                $item.find('.number .text').text(item.orderId);
                $item.find('.people .text').text(item.people);
                $item.find('.waiter-home-order-number .text').text(item.orderId);
                $item.find('.waiter-home-order-time .text').text(time);

                $item.find('.total .money').text('￥'+item.price);
                $item.find('.table .text').text(item.tableName);
//                $item.find('.btn-buy').click(buyClicked);
                $item.click(showDetail);
                $ongoingList.append($item);
            }


            function showDetail(){
                var orderId = $(this).attr('order-id');
                location.href="#action=preview&orderId=" + orderId;
            }

            function cloneOngoingItem(){
                var $item = $repeatOngoingItem.clone();
                $item.show();
                $item.attr('id','');
                return $item;
            }

        }());
    </script>
</section>

</body>

</html>